<template>
	<div>
		<!-- <el-dialog title="添加生猪信息" :visible.sync="dialogFormVisible" width="500px">
			<el-form :rules="rules" :model="form">
				<el-form-item prop="qianzi" label="签字兽医" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off" style="width: 218px"></el-input>
				</el-form-item>
				<el-form-item prop="time" label="检疫时间" :label-width="formLabelWidth">
					<div class="block"><el-date-picker v-model="form.date" type="date" placeholder="选择日期"></el-date-picker></div>
				</el-form-item>
				<el-form-item prop="number" label="合格证编号" :label-width="formLabelWidth">
					<el-input v-model="form.jianyi_num" autocomplete="off" style="width: 218px"></el-input>
				</el-form-item>

				<el-form-item prop="unit" label="检疫单位" :label-width="formLabelWidth">
					<el-input v-model="form.unit" autocomplete="off" style="width: 218px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="setCompany()">确 定</el-button>
			</div>
		</el-dialog> -->
<!-- 		<el-button type="primary" @click="adduser">添加用户</el-button>
 -->		<el-dialog title="添加用户" :visible.sync="dialogFormVisible">
			<el-form :model="userForm" ref="userForm" :rules="rules" label-position="left">
				<el-form-item label="用户名称" prop="name"><el-input v-model="userForm.name"></el-input></el-form-item>
				<el-form-item label="用户电话" prop="tel"><el-input v-model="userForm.tel"></el-input></el-form-item>
				<el-form-item label="用户性别" prop="sex">
					<template>
						<el-select v-model="userForm.sex" clearable placeholder="请选择性别">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</template>
				</el-form-item>
				<el-form-item label="用户简介" prop="introduction"><el-input v-model="userForm.introduction"></el-input></el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="confirmAddUser(userForm)">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'company',
	// data() {
	// 	return {
	// 		dialogFormVisible: false,
	// 		form: {
	// 			name: '',
	// 			date: '',
	// 			region: '',
	// 			jianyi_num: ''
	// 		},
	// 		formLabelWidth: '120px',
	// 		rules: {
	// 			qianzi: [{ required: true, message: 'NotNull1', trigger: 'blur' }],
	// 			time: [{ required: true, message: 'NotNull1', trigger: 'blur' }],
	// 			number: [{ required: true, message: 'NotNull1', trigger: 'blur' }],
	// 			unit: [{ required: true, message: 'NotNull1', trigger: 'blur' }]
	// 		}
	// 	};
	// },
	// methods: {
	// 	showDialog() {
	// 		this.dialogFormVisible = true;
	// 	},
	// 	setCompany() {
	// 		// $emit触发当前实例上的事件
	// 		// 触发父组件的children事件，将this.form回传过去
	// 		this.$emit('children', this.form);
	// 		// 关闭对话框
	// 		this.dialogFormVisible = false;
	// 	}
	// }
	data() {
		return {
			userForm: {},
			dialogFormVisible: false,
			rules: {
				//表单验证
				name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
				tel: [{ required: true, message: '请输入用户电话', trigger: 'blur' }],
				sex: [{ required: true, message: '请选择用户性别', trigger: 'blur' }],
				introduction: [{ required: true, message: '请输入用户简介', trigger: 'blur' }]
			},
			options: [
				//下拉框选项
				{
					value: '1',
					label: '男'
				},
				{
					value: '2',
					label: '女'
				}
			]
		};
	},
	methods: {
		// adduser() {
		// 	this.dialogFormVisible = true;
		// },
		confirmAddUser(form) {
			this.$refs.userForm.validate(valid => {
				if (valid) {
					//表单验证通过
					console.log(form); //form就是form表单对象
					this.loading = true;
					this.$http.post('http://127.0.0.1:8888/user/create', { data: form }).then(res => {
						// console.log(res);
						this.loading = false;
						this.dialogFormVisible = false;
						this.getList(); //重新调用渲染列表的方法
						this.$message({ message: '添加成功', type: 'success' });
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		showDialog() {
			this.dialogFormVisible = true;
		},
		setCompany() {
			// $emit触发当前实例上的事件
			// 触发父组件的children事件，将this.form回传过去
			this.$emit('children', this.form);
			// 关闭对话框
			this.dialogFormVisible = false;
		}
	}
};
</script>

<style scoped></style>
<!-- 
<template>
  <div>
    <el-form ref="form" :model="user" :rules="rules" label-width="88px" :inline="true">
      <el-form-item label="yonghuming" prop="pwd">
        <el-input v-model="user.pwd"></el-input>
      </el-form-item>
      <el-form-item label="mima" prop="pwd2">
        <el-input v-model="user.pwd2" type="password" show-passwrd></el-input>
      </el-form-item>
      <el-form-item align="left">
        <el-button type="primary"> zhuce</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "Form2",
    data(){
      let checkPwd2=(rule,value,callback)=>{
        if(value.trim().length==0)
        {
          callback(new Error("NotNull!!!"));
        }
        else if(value!=this.user.pwd){
          callback(new Error("NotSame!"));
        }else{
          callback();
        }
      };
      return {
        user:{
          pwd:"",
          pwd2:""
        },
        rules:{
          pwd:[{required:true,message:"NotNull1",trigger:"blur"}],
          pwd2:[{validator:checkPwd2,trigger:"blur"}]
        }
      }
    }

  }
</script>

<style>
</style>
 -->
